<template>
  <div class="index">
    <div class="container padding10">
      <div class="row">
        <div class="sm8">
          <div class="article-content">
            <div class="index-title">
              <h3>文章列表</h3>
            </div>
            <articleGrid v-for="article in articleList" :key="article.id" :article="article"></articleGrid>
            <div class="index-title">
              <h3>资源分享</h3>
            </div>
            <div class="resourcesGrid-box">
              <resourcesGrid  v-for="resource in resourcesList" :key="resource.id" :article="resource"></resourcesGrid>
            </div>            
          </div>
        </div>
        <div class="sm4">
          <sidebar></sidebar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sidebar from '@/components/sidebar/sidebar'
import articleGrid from '@/components/grid/articleGrid'
import resourcesGrid from '@/components/grid/resourcesGrid'

export default {
  name: 'index',
  data () {
    return {
      articleList:[],
      resourcesList: [],
    }
  },
  created: function(){
    this.$http.post('/api/article/recommendArticle').then(function(result){
      var data = result.body.data;
      this.articleList = data['list'];
    })


    this.$http.post('/api/article/indexResources').then(function(result){
      var data = result.body.data;
      this.resourcesList = data['list'];
    })

  },
  methods: {


  },
  components: {sidebar, articleGrid, resourcesGrid}
}
</script>


<style lang="scss">
  .padding10{padding-top: 10px;}
  .article-content{padding:0px 5px 5px;}
  .index-title{padding: 0px;text-align:center;color:#666;font-weight: 100;}
  .index-title h3{background-color: #fff;padding:15px 0px;font-size: 21;font-weight:100;border-left: 3px solid #ddd;padding-left: 20px;}
  .resourcesGrid-box{margin-top:5px;}  

  @media screen and (max-width: 500px) {
    .resourcesGrid-box{width: 102%;margin-left: -1%;}
  }

  @media screen and (min-width: 500px) {
    .resourcesGrid-box{width: 101%;margin-left: -0.5%;}
  }

</style>